<template>
  <div>
    <div style="margin-top: -90px;margin-bottom: -20px">添加用户</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <div style="margin-right: 125px;margin-left: 55px">
        <el-form-item label="医师姓名" prop="name" >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" >
          <el-input v-model="ruleForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospital">
          <el-input v-model="ruleForm.hospital"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
          <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
        </el-form-item>

        <el-form-item label="诊治类别" prop="treatType">
          <el-select v-model="ruleForm.treatType" placeholder="请选择诊治类别" clearable>
            <el-option
                v-for="item1 in options1"
                :key="item1.value1"
                :label="item1.label"
                :value="item1.value1">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="医师级别" prop="doctorLevel">
          <el-select v-model="ruleForm.doctorLevel" placeholder="请选择医师级别" clearable>
            <el-option
                v-for="item2 in options2"
                :key="item2.value2"
                :label="item2.label"
                :value="item2.value2">
            </el-option>
          </el-select>
        </el-form-item>


      </div>
      <el-form-item style="margin-left: -90px">
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {adduser} from "@/api/user";

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        pwd: '',
        phone: '',
        hospital: '',
        treatType: '',
        doctorLevel: '',
        value1: '',
        value2: ''
      },
      options1: [
        {value1: '1', label: '肩部'},
        {value1: '2', label: '踝部'},
        {value1: '3', label: '膝部'},
        {value1: '9', label: '腰部'},
        {value1: '10', label: '头部'},
        {value1: '11', label: '肘部'},
        {value1: '12', label: '腿部'}
      ],
      options2: [
        {value2: '1', label: '主任医师'},
        {value2: '2', label: '普通医师'},
        {value2: '3', label: '实习医师'}

      ],
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
        hospital: [{ required: true, message: '请输入所属医院', trigger: 'blur' }],
        doctorLevel: [{ required: true, message: '请选择医师级别', trigger: 'blur' }],
        treatType: [{ required: true, message: '请选择诊治类别', trigger: 'blur' }],
        sex: [{ required: true, message: '请选性别', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          adduser(this.ruleForm).then(res=>{
            if(res.code==200){
              //注册成功
              alert("添加成功！")

            }else{
              //注册失败
              alert(res.msg)
            }
          }).catch(error=>{})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
